<template>
  <div id="login">
    <div class="head">
      <div class="text">Titk购物</div>
      <div class="font">欢迎登陆</div>
    </div>
    <div class="center">
      <div class="login_container">
        <div class="login">
          <div class="title">
            <span
              :class="{ active: loginType === 'sms' }"
              @click="changeLoginType('sms')"
              >短信登录</span
            >
            <span
              :class="{ active: loginType === 'password' }"
              @click="changeLoginType('password')"
              >密码登录</span
            >
          </div>
          <div class="login_form" v-show="isCodeShow">
            <el-form
              ref="form"
              :rules="rules"
              :model="loginform"
              label-width="80px"
            >
              <el-form-item prop="number">
                <el-input
                  v-model="loginform.number"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="loginform.code" placeholder="请输入验证码">
                  <template slot="append">
                    <el-button type="primary" size="small" @click="sendCode">{{
                      codeButtonText
                    }}</el-button>
                  </template>
                </el-input>
              </el-form-item>
              <span v-if="sendSuccess" style="font-size: 12px; color: green"
                >发送成功 网络可能稍有延迟 请耐心等待</span
              >
              <el-form-item>
                <el-checkbox v-model="agreement">我已阅读并同意</el-checkbox>
                <span>《用户协议》</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="onSubmit"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <div class="login_form" v-show="isUserShow">
            <el-form ref="form" :model="loginformUser" label-width="80px">
              <el-form-item>
                <el-input
                  v-model="loginformUser.number"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="password"
                  v-model="loginformUser.password"
                  placeholder="请输入密码"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="agreement">我已阅读并同意</el-checkbox>
                <span>《用户协议》</span>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="onSubmitother"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="intro">
        <ul>
          <li>关于我们</li>
          <li>联系我们</li>
          <li>联系客服</li>
          <li>商家入驻</li>
          <li>营销中心</li>
          <li>手机商城</li>
          <li>友情链接</li>
          <li>销售联盟</li>
        </ul>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { onMounted } from "vue";
export default {
  name: "login",
  components: {},
  data() {
    return {
      loginformUser: {
        number: "",
        password: "",
      },

      loginform: {
        number: "",
        code: "",
      },
      loginType: "sms", // 默认选中短信登录
      codeDisabled: false, // 是否禁用发送验证码按钮
      codeButtonText: "发送验证码", // 发送验证码按钮文本
      sendSuccess: false, // 是否发送成功
      agreement: false, // 是否同意用户协议
      isCodeShow: true, // 是否显示验证码登录
      isUserShow: false, // 是否显示密码登录

      rules: {
        number: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号格式",
            trigger: "blur",
          },
          { len: 11, message: "手机号长度应为11位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 登录按扭 短信登录
    onSubmit() {
      if (this.agreement) {
        // 用户已同意用户协议，执行登录逻辑
        // 登录逻辑
        this.$http.post("/api/user/loginByCode", this.loginform).then((res) => {
          if (res.data.code === 200) {
            //   获取token
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("id", res.data.data.id);
            this.$message.success("登录成功");
            this.$router.push("/");
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else {
        // 用户未同意用户协议，给出提示信息
        this.$message.error("请先同意用户协议");
      }
    },
    // 登录按扭 密码登录
    onSubmitother() {
      if (this.agreement) {
        // 用户已同意用户协议，执行登录逻辑
        // 登录逻辑
        this.$http.post("/api/user/login", this.loginformUser).then((res) => {
          if (res.data.code === 200) {
            //   获取token
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("id", res.data.data.id);

            this.$message.success("登录成功");
            this.$router.push("/");
          } else {
            this.$message.error("用户名或密码错误");
          }
        });
      } else {
        // 用户未同意用户协议，给出提示信息
        this.$message.error("请先同意用户协议");
      }
    },

    // 发送手机验证码
    sendCode() {
      //   检验是否有手机号
      if (!this.loginform.number) {
        this.$message.error("请输入正确的手机号");
        return;
      }
      let url = "/api/user/sendCode?phone=" + this.loginform.number;
      this.$http.post(url).then((res) => {
        if (res.data.code === 200) {
          this.codeDisabled = true; // 禁用按钮、
          this.sendSuccess = true; // 显示发送成功提示
          let seconds = 60;
          const timer = setInterval(() => {
            seconds--;
            this.codeButtonText = `${seconds}s后重新发送`;
            if (seconds === 0) {
              clearInterval(timer);
              this.codeDisabled = false; // 重新激活按钮
              this.codeButtonText = "发送验证码";
              this.sendSuccess = false; // 隐藏发送成功提示
            }
          }, 1000);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 显示密码登录 和 短信登录
    changeLoginType(type) {
      if (type === "sms") {
        this.isCodeShow = true;
        this.isUserShow = false;
      } else {
        this.isCodeShow = false;
        this.isUserShow = true;
      }
      this.loginType = type;
    },
  },
  mounted() {},
};
</script>
  
  
  
  
  
  <style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  .head {
    height: 100px;
    width: 100%;
    .text {
      float: left;
      font-size: 40px;
      text-align: center;
      line-height: 100px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      color: #ff6700;
      text-align: left;
      padding-left: 200px;
    }
    .font {
      float: right;
      font-size: 18px;
      text-align: center;
      color: #5f5b5b;
      line-height: 100px;
      font-family: Arial, Helvetica, sans-serif;
      text-align: left;
      padding-right: 200px;
    }
  }

  .center {
    position: relative;
    height: 600px;
    width: 100%;
    background: url("../../assets/images/background.png") no-repeat;
    background-size: cover;

    .login_container {
      position: absolute;
      width: 350px;
      height: 100%;
      left: 1110px;
      top: 130px;
      .login {
        padding: 20px 20px 20px 20px;
        width: 280px;
        height: 300px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 2;
        .title {
          width: 100%;
          height: 50px;
          span {
            margin-right: 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
          }
          span.active {
            color: #ff6700;
          }
          span {
            &:hover {
              color: #ff6700;
            }
          }
        }
      }
      .login_form {
        box-shadow: 2;
      }
    }
  }
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }
  .footer {
    width: 100%;
    .intro {
      margin-left: 340px;
      width: 100%;
      ul {
        li {
          float: left;
          margin-left: 50px;
          color: #5f5b5b;
          font-size: 14px;
          cursor: pointer;
        }
        li {
          &:hover {
            color: #ff6700;
          }
        }
      }
    }
  }
}
</style>